<template>
	<zui-box class="box">
		<!-- 金豆分红 -->
		<zui-navbar title=" " bg="transparent"></zui-navbar>
		<u-gap height="100rpx"></u-gap>
		<view class="dividends_header">
            <view class="dividends_header__img">
                <zui-avatar size="100rpx" :src="info.avatar" color="#fff"></zui-avatar>
            </view>
            <view class="dividends_header__content">
                <view class="name">{{ info.nickname }}</view>
                <view class="info">正在享受分红权限</view>
                <view class="grade">等级：{{ info.vip_level }}级</view>
            </view>
            <view class="dividends_header__grade">
                <view class="count">{{ info.vip_level }}</view>
            </view>
        </view>
		<u-gap height="70rpx"></u-gap>


		<view class="bonus_box">
			<view class="bonus_title">当月总金豆数量:</view>
            <view class="bonus_count">{{goldNumber}}</view>
			<view class="bonus_info">预计当月可分红数量：<label class="number">{{bonusCount}} 金豆</label></view>
		</view>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			info: {},
			goldNumber: 0,//全网总金豆数
            gradeNumber: 0 //当前等级人数
		};
	},
	onShow() {
        this.getUserInfo()
		this.getinfo();
	},
    computed: {
        //分红数量
        bonusCount() {
            //可分红的金豆数量=总金豆数/6/当前等级人数
            const count = this.goldNumber / 6 / this.gradeNumber;
			console.log(this.goldNumber,this.gradeNumber)
            return Math.floor(count)
        },
    },
	methods: {
        getUserInfo(){
            uni.$u.http
				.get('/app/user/getUserInfo', {
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.info = res;
				})
				.catch(err => {});
        },
		getinfo() {
			uni.$u.http.get('/app/user/sumBonusNum', {
					params: {
                        jinqili_token:uni.getStorageSync('token')
                    },
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
                    this.gradeNumber = res;
				})
				.catch(err => {}); 
            uni.$u.http.get('/app/user/sumOrder', {
					params: {
                        jinqili_token:uni.getStorageSync('token')
                    },
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
                    this.goldNumber = res;
				})
				.catch(err => {}); 
		},
      
	
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100vh;
	background-image: url('~@/static/img/dividends_bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}

.dividends_header {
    width: 650rpx;
	height: 160rpx;
    margin: 0 auto;
    background-image: url('~@/static/img/dividends_header.png');
	background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding: 20rpx 25rpx;
    .dividends_header__img{
        align-self: flex-start;
        margin-right: 20rpx;
    }
    .dividends_header__content{
        text-align: left;
        color: #333;
        width: 320rpx;
       
        .name{
            font-size: 30rpx;
        }
        .name,.info{
            margin-bottom: 10rpx;
        }
        .grade{
            width: 200rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            color:#f0ca62;
            border-radius: 50rpx;
            background: #fff;
            font-weight: bold;
        }
    }
    .dividends_header__grade{
        width: 180rpx;
        height: 140rpx;
        background-image: url('~@/static/img/dividends_medal.png');
        background-size: 100% 100%;
        
        position: absolute;
		right: 40rpx;
        .count{
            color:#e4a802;
            position: absolute;
            left: 86rpx;
            top: 42rpx;
            font-size: 12px;;
        }
    }
}

.sm_title {
	width: 260rpx;
	height: 68rpx;
	line-height: 68rpx;
	background: #ffffff;
	border-radius: 34rpx;
	font-size: 44rpx;
	color: #e11a18;
	margin: 0 auto;
}

.bonus_box{
	width: 710rpx;
	height: 650rpx;
    
	background-image: url('~@/static/img/dividends_count.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	margin: 150rpx auto 0 auto;
	color: #fff;
    .bonus_count,.bonus_title,.bonus_info{
        position: absolute;
        text-align: center;
        width: 100%;
    }
	.bonus_count{
        top:200rpx;
        font-size: 58px;
	}
	.bonus_title{
		top: 115rpx;
	}

	.bonus_info{
		bottom: 70rpx;
		.number{
			font-size: 24px;
		}
	}
}

.avatar_box {
	display: flex;
	justify-content: center;
}

.code_title {
	font-size: 28rpx;
	color: #333;
}

.code_bum {
	font-size: 70rpx;
	color: #333;
}

.code_img {
	border-radius: 8rpx;
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
	// border: 20rpx solid #fff;
	// width: 280rpx;
	// height: 280rpx;
	
	display: inline-block;
}

/deep/.u-button--warning {
	display: initial !important;
	padding: 14rpx 56rpx !important;
}
</style>
